<template>
  <view class="container screen-width">
    <view class="search-container">
      <view class="search-type flex items-middle">
        <view class="type-lable">测评类型：</view>
        <view class="type-info flex items-middle">
          <input @click="onStart" type="text" placeholder="请选择测评项目类型" v-model="typeName" :disabled="true"/>
          <image src="../../static/userCard/bottom_icon.png"></image>
        </view>
      </view>
      <view class="search-type flex items-middle">
        <view class="type-lable">测评企业：</view>
        <view class="type-info flex items-middle">
          <input type="text" placeholder="请输入您要测评的企业名称" v-model="keyWord"/>
        </view>
        <view class="search-btn" @click="onAdd(keyWord)">测评</view>
      </view>
       <view class="search-result" v-show="companyList.length && keyWord">
        <ul>
          <li v-for="(item, index) in companyList" :key="index" @click="onAdd(item.companyName)">
            <p v-html="item.companyName"></p>
          </li>
        </ul>
      </view>
    </view>
    
    <!-- 有搜索结果 -->
    <!-- <view v-if="companyName" class="search_content">
      <text>已选测评企业</text>
      <view class="resultList">
        <view>
          <van-swipe-cell>
            <van-cell :border="true" :title="companyName" />
          </van-swipe-cell>
        </view>
      </view>
      <view class="startComparison" @tap="onDetail()">开始测评</view>
    </view> -->
    <!-- 没有搜索结果 -->
    <!-- v-if="!companyList.length && !companyName" -->
    <view class="no_result">
      <view class="text">测评结果示例</view>
      <image :src="$imgUrl + 'static/declare-detail.jpg'"/>
    </view>
    <van-popup v-model="showPop" position="bottom" :style="{ height: '30%' }">
      <view class="list-pop">
        <view class="type">测评类型</view>
        <view class="item" v-for="(item,index) in typeList" :key="index" @click="selectType(item)">{{item.text}}</view>
        <!-- <view class="item" @click="toDeclare">创新性中小企业</view>
        <view class="item" @click="toDeclareSmall">专精特新中小企业</view> -->
      </view>
    </van-popup>
    <Festival></Festival>
  </view>
</template>
<script>
import { debounce } from "@/util/debounce.js";
import { companyList } from "../../util/api/es.js";
import { isWeixin, wxShareConfig } from "@/util/wx.js";
export default {
  data() {
    return {
      keyWord: "",
      companyList: [],
      typeList: [
        { text: "创新型中小企业",url: "index" },
        { text: "专精特新中小企业",url: "small" },
        { text: "高新技术企业",url: "highNew" },
        { text: "科技型中小企业", url: "science" }
      ],
      pageUrl: '',
      typeName: "",
      companyName: "",
      showPop: false
    };
  },
  watch: {
    keyWord: debounce(function(e) {
      this.keyWord = e.trim();
      if (e.trim() !== "") {
        this.changeValue();
      }
    }, 1000)
  },
  onLoad() {
    this.initShareConfig();
  },
  onShow() {
    this.showPop = false;
    let token = this.$getToken()
    if (!token) {
      uni.showModal({
        title: '提示',
        content: '您还没有登录，请登录后操作！',
        cancelText: '取消', // 取消按钮的文字
        confirmText: '去登录', // 确认按钮文字
        confirmColor: '#1678ff',
        success: res => {
          if (res.confirm) {
            uni.setStorageSync('pageUrl', window.location.href)
            uni.navigateTo({
              url: '/pages/login/index',
            })
          } else {
            uni.switchTab({
              url: `/pages/index/index`,
            })
          }
        },
      })
      return
    } 
  },
  methods: {
    selectType(item) {
      this.typeName = item.text
      this.pageUrl = item.url;
      this.onClose()
    },
    getCompanyList() {
      let obj = {
        companyName: this.keyWord,
        pageIndex: 0,
        pageSize: 10,
        province: ""
      };
      companyList(obj).then(res => {
        if (res.retCode == 0 && res.data.content.length) {
          let result = this.$changeText(
            res.data.content,
            "companyName",
            this.keyWord
          );
          this.companyList = result;
        }
      });
    },
    // 监听输入框的值
    changeValue() {
      this.getCompanyList();
    },
    toDetail() {
      uni.navigateTo({
        url: `/pages/declare/${this.pageUrl}?name=${this.companyName}`
      });
      this.companyName = "";
      this.keyWord = "";
    },
    onDetail() {
      this.toDetail()
    },
    onAdd(name) {
      if(!this.pageUrl) {
        uni.showToast({
          title: "请先选择测评类型",
          duration: 2000,
          icon: "none"
        });
        return
      }
      if (name === "") {
        uni.showToast({
          title: "请先输入想要测评的企业",
          duration: 2000,
          icon: "none"
        });
        return;
      }
       this.companyName = this.$matcheHTML(name);
      this.onDetail()
    },
    onStart() {
      this.showPop = true;
    },
    onClose() {
      this.showPop = false;
    },
    initShareConfig() {
      let _this = this;
      let windowurl = window.location.href.split("#")[0];
      uni.request({
        url: "https://oldm.51bmj.cn/WeiXin/GetClientSign", //仅为示例，并非真实接口地址。
        data: {
          rawUrl: windowurl
        },
        dataType: "json",
        header: {
          "X-Requested-With": "XMLHttpRequest"
        },
        method: "GET",
        success: res => {
          if (res.statusCode == 200) {
            let { data } = res;
            let shareInfo = {
              title: "企业项目测评",
              desc: "快速精准测评项目评分",
              link: window.location.href
            };
            wxShareConfig(this.$wx, data, shareInfo);
          }
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  .search-container{
    position: relative;
  }
  .search-type {
    width: 100%;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    background: #fff;
    height: 100rpx;
    .type-lable {
      // width: 25%;
      font-size: 28rpx;
    }
    .type-info {
      background-color: #f8f8f8;
      padding: 15rpx;
      border-radius: 6rpx;
      width: 380rpx;
      input {
        // padding: 0 15rpx;
        font-size: 28rpx;
      }
      image {
        width: 30rpx;
        height: 20rpx;
      }
    }
    .search-btn {
      padding: 15rpx 20rpx;
      background: #1678ff;
      color: #fff;
      border-radius: 10rpx;
      margin-left: 20rpx;
      font-size: 28rpx;
    }
  }
  .search-result {
      position: absolute;
      z-index: 999;
      top: 200rpx;
      background-color: #fff;
      max-height: 800rpx;
      width: 100%;
      padding: 0 30rpx;
      overflow-y: auto;
      ul {
        li {
          line-height: 60rpx;
          height: 60rpx;
          border-bottom: 1rpx solid #ccc;
          p {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1; //限制行数
            overflow: hidden; //超出部分隐藏
            text-overflow: ellipsis;
          }
        }
      }
    }
  .search_content {
    position: relative;
    min-height: 700upx;
    text {
      padding-left: 30upx;
      height: 80upx;
      background-color: #fff6ef;
      color: #ff7648;
      font-size: 28upx;
      display: flex;
      align-items: center;
    }
    .startComparison {
      position: absolute;
      bottom: 0;

      right: 50%;
      transform: translateX(50%);
      margin: 100upx auto 0;
      width: 290upx;
      height: 80upx;
      background-color: #1678ff;
      font-size: 28upx;
      color: #fff;
      border-radius: 10upx;
      line-height: 80upx;
      text-align: center;
    }
  }
  .no_result {
    display: flex;
    align-items: center;
    padding-top: 108upx;
    flex-direction: column;
    color: #bbb;
    .text{
      font-size: 32rpx;
      margin-bottom: 10rpx;
      color: #1678ff;
    }
    image {
      width: 100%;
      height: 2237rpx;
    }
  }
  .company-name {
    width: 100%;
    padding: 30rpx;
    box-sizing: border-box;
    .lable {
      width: 100%;
    }
    .name {
      width: 100%;
      margin-top: 15rpx;
      color: #1678ff;
      font-size: 32rpx;
    }
  }
  .list-pop {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
    .type {
      width: 100%;
      padding: 30rpx 0;
      box-sizing: border-box;
      text-align: left;
      color: #bbb;
    }
    .item {
      width: 100%;
      text-align: center;
      padding: 30rpx 0;
    }
  }
}
</style>